<template>
	<div class="box">
		<div class="top">
			<div class="top-center-box">
				<div class="top-left-box">
					<video controls muted autoplay="autoplay" class="video" :src="showVideo"></video>
				</div>
				<div class="top-right-box">
					<ul class="Detail">
						<li class="ditev-box" @click="changeVideo(item)" v-for="item in videolist" :key="item.id" :style="`background-image: url(${item.image})`">
							<div class="zzc-box" :class="onclickClass==item.id?'zzc-boxclick':''">
								<span>{{ item.size }}</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="center">
			<div class="top-center">
				<div class="js-box" v-for="yy in yyList" :key="yy.id">
					<span>
						{{yy.name}}
					</span>
				</div>
			</div>
			<div class="cen-center">
				<div class="cen-left">
					<div class="cen-left-top">
						<el-carousel height="300px" direction="vertical" :autoplay="false">
							<el-carousel-item v-for="img in imgList" :key="img.id">
  		
								<img style="height: 100%; cursor :pointer;" :src="img.imgGe" alt="">
							</el-carousel-item>
						</el-carousel>
					</div>
				</div>
				<div class="cen-zj">
					<div class="cen-zj-top">
						<div class="span-fl">
							<span>热门分区</span>

						</div>
						<ul class="ul-box" style="width: 100%;height: 100%;">
							<li>
								<img src="../../../assets/web前端.jpg" alt="">
								<span>前端</span>
							</li>
							<li>
								<img src="../../../assets/后端.jpg" alt="">
								<span>
									后端
								</span>
							</li>
							<li>
								<img src="../../../assets/人工智能.png" alt="">
								<span>
									人工智能
								</span>
							</li>
						</ul>
					</div>
					<div class="cen-zj-buttom">
						<div class="zx-span">
							<span style="font-size: 18px;">
							咨询中心
						</span>
						<span style="font-size: 12px;margin-right: 5px;">
							更多资讯
							<i class="el-icon-d-arrow-right"></i>
						</span>
						</div>
						<ul class="zx-ul-box" style="width: 100%;height: 90%;">
							<li>
								<span>
									【公告】OpenAI CEO 称公司没有上市计划
								</span>
								<span class="time-size">
									2023/6/6
								</span>
							</li>
							<li>
								<span>
									【公告】阿里云召开AI黑客编程大赛
								</span>
								<span class="time-size">
									2023/6/6
								</span>
							</li>
							<li>
								<span>
									【公告】ChatGPT迎华人“掌门人”！
								</span>
								<span class="time-size">
									2023/6/6
								</span>
							</li>
							<li style="margin-bottom: 10px;">
								<span>
									【公告】程序员的大语言模型技术指南
								</span>
								<span class="time-size">
									2023/6/6
								</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="cen-right">
					<div class="span-reb">
						<span>
							人气榜
						</span>
					</div>
					<ul class="rqb-ul-box">
						<li>
							<svg t="1686184002359" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6469" width="26" height="26"><path d="M801.024 330.325333H222.976V16.64c0-9.173333 7.594667-16.682667 16.938667-16.682667h544.170666c9.344 0 16.938667 7.509333 16.938667 16.64v313.685334z" fill="#FFF7D7" p-id="6470"></path><path d="M222.976 0h138.368v302.805333H222.976V0z m219.818667 0h138.410666v302.805333h-138.410666V0z m219.861333 0h138.368v302.805333h-138.368V0z" fill="#F94F46" p-id="6471"></path><path d="M85.333333 591.829333c0 235.562667 190.976 426.666667 426.666667 426.666667s426.666667-190.976 426.666667-426.666667-190.976-426.666667-426.666667-426.666666-426.666667 191.104-426.666667 426.666666z" fill="#FEE701" p-id="6472"></path><path d="M195.413333 605.568a302.848 302.848 0 1 0 605.696 0 302.848 302.848 0 0 0-605.653333 0z" fill="#F5B319" p-id="6473"></path><path d="M497.450667 445.738667h34.986666v297.472h-46.506666v-242.858667c-18.346667 17.066667-41.813333 29.525333-69.930667 37.461333v-44.928c13.653333-3.413333 27.733333-9.173333 43.093333-17.493333 15.36-9.258667 28.16-18.816 38.357334-29.653333z m-229.546667-92.501334a17.493333 17.493333 0 0 1-12.629333-5.376 16.64 16.64 0 0 1 0.682666-23.978666c6.826667-6.272 13.866667-12.245333 21.077334-18.005334l10.496-8.064a17.493333 17.493333 0 0 1 24.32 3.285334c5.930667 7.552 4.266667 18.218667-3.328 23.68a369.877333 369.877333 0 0 0-28.8 23.68 16.042667 16.042667 0 0 1-11.818667 4.778666z m625.578667 216.106667a17.28 17.28 0 0 1-17.194667-14.592 334.805333 334.805333 0 0 0-19.456-74.794667 349.312 349.312 0 0 0-171.861333-187.733333 361.386667 361.386667 0 0 0-156.757334-37.888 365.098667 365.098667 0 0 0-155.690666 32.938667c-6.912 3.2-13.653333 6.656-20.48 10.154666a17.664 17.664 0 0 1-23.594667-6.784 16.853333 16.853333 0 0 1 6.954667-23.04c7.296-4.010667 14.933333-7.765333 22.357333-11.178666a403.626667 403.626667 0 0 1 170.837333-36.181334 394.922667 394.922667 0 0 1 172.288 41.472c87.466667 43.477333 154.538667 116.565333 188.842667 206.08 10.069333 26.453333 17.28 54.016 21.248 81.962667a17.066667 17.066667 0 0 1-14.933333 19.114667 6.101333 6.101333 0 0 1-2.56 0.469333z" fill="#FFFFFF" p-id="6474"></path></svg>
							<span>chatGPT</span>
						</li>
						<li>
							<svg t="1686184038371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7844" width="26" height="26"><path d="M799.786667 334.336H224.042667V16.896c0-9.301333 7.594667-16.896 16.896-16.896H782.933333c9.301333 0 16.853333 7.594667 16.853334 16.853333v317.44z" fill="#FFF7D7" p-id="7845"></path><path d="M224.042667 0h137.813333v302.592h-137.813333V0z m218.965333 0h137.813333v302.592h-137.813333V0z m218.965333 0h137.813334v302.592h-137.813334V0z" fill="#F94F46" p-id="7846"></path><path d="M85.333333 596.096c0 235.136 190.634667 425.856 425.813334 425.856a425.813333 425.813333 0 0 0 425.898666-425.813333A425.813333 425.813333 0 0 0 511.146667 170.24C275.968 170.24 85.333333 360.96 85.333333 596.096z" fill="#F3CA7E" p-id="7847"></path><path d="M213.077333 596.096a298.069333 298.069333 0 1 0 596.224 0 297.941333 297.941333 0 0 0-298.026666-297.984 298.112 298.112 0 0 0-298.197334 297.984z" fill="#E98F36" p-id="7848"></path><path d="M516.864 440.746667c28.458667 0 52.309333 7.936 70.656 24.618666 17.962667 16.768 27.136 38.016 27.136 64.384 0 25.941333-10.069333 49.28-29.226667 70.656-11.690667 12.074667-32.213333 28.032-61.866666 48.085334-32.256 21.333333-51.413333 40.106667-57.685334 56.490666h149.333334v40.106667H409.429333c0-29.610667 9.6-55.552 29.653334-78.122667 10.88-12.970667 33.450667-30.933333 67.285333-54.4 20.053333-14.165333 34.304-25.557333 42.581333-34.304 13.397333-15.104 20.48-31.36 20.48-48.938666 0-16.768-4.608-29.226667-13.781333-37.589334-9.173333-8.405333-22.954667-12.586667-40.533333-12.586666-18.858667 0-33.024 6.272-42.581334 19.242666-9.984 12.586667-15.104 30.549333-15.872 54.784h-45.653333c0.426667-33.408 10.112-60.16 28.885333-80.213333 19.242667-21.76 45.226667-32.256 76.928-32.256zM256.853333 354.133333a16.981333 16.981333 0 0 1-12.373333-5.376 16.938667 16.938667 0 0 1 0.682667-24.064c6.698667-6.272 13.568-12.245333 20.650666-18.048 3.413333-2.688 6.869333-5.504 10.282667-8.106666a16.896 16.896 0 0 1 23.850667 3.328 16.768 16.768 0 0 1-3.285334 23.722666c-3.2 2.432-6.314667 4.693333-9.386666 7.296-6.4 5.290667-12.8 10.666667-18.858667 16.469334a15.530667 15.530667 0 0 1-11.562667 4.778666z m613.248 216.874667a17.066667 17.066667 0 0 1-16.853333-14.677333 342.314667 342.314667 0 0 0-19.072-75.050667 347.605333 347.605333 0 0 0-168.448-188.288 347.733333 347.733333 0 0 0-306.304-4.992c-6.784 3.157333-13.354667 6.656-20.053333 10.154667a17.109333 17.109333 0 0 1-23.168-6.784 17.109333 17.109333 0 0 1 6.826666-23.168 387.925333 387.925333 0 0 1 189.44-47.488 379.946667 379.946667 0 0 1 168.832 41.6 381.824 381.824 0 0 1 185.130667 206.805333c9.856 26.538667 16.938667 54.186667 20.821333 82.218667a17.024 17.024 0 0 1-14.634666 19.2 5.845333 5.845333 0 0 1-2.517334 0.469333z" fill="#FFFFFF" p-id="7849"></path></svg>
							<span>2023 Qualcomm XR创新应用挑战赛系列公开课</span>
						</li>
						<li>
							<svg t="1686184074593" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9046" width="26" height="26"><path d="M719.2576 373.0432H290.0992V141.0048c0-6.7584 5.632-12.288 12.5952-12.288h404.0704c6.9632 0 12.5952 5.5296 12.5952 12.288v232.0384z m0 0" fill="#FFF7D7" p-id="9047"></path><path d="M290.0992 128.6144h102.7072v221.184H290.0992v-221.184z m163.2256 0H556.032v221.184H453.3248v-221.184z m163.2256 0h102.7072v221.184H616.5504v-221.184z m0 0" fill="#F94F46" p-id="9048"></path><path d="M186.6752 564.3264c0 171.8272 142.1312 311.1936 317.44 311.1936s317.44-139.3664 317.44-311.1936c0-171.9296-142.1312-311.1936-317.44-311.1936s-317.44 139.3664-317.44 311.1936z m0 0" fill="#E8A087" p-id="9049"></path><path d="M513.4336 455.3728h25.6v218.2144h-33.9968v-178.176c-13.4144 12.5952-30.6176 21.7088-51.0976 27.5456v-32.9728c9.9328-2.4576 20.2752-6.7584 31.4368-12.8 11.264-6.8608 20.5824-13.9264 28.0576-21.8112z m-198.9632-67.8912c-3.3792 0-6.656-1.3312-9.216-3.8912-4.8128-5.0176-4.608-12.9024 0.512-17.6128 5.0176-4.608 10.1376-9.0112 15.36-13.2096 2.56-1.9456 5.12-3.9936 7.68-5.9392 5.632-4.1984 13.6192-3.072 17.8176 2.4576 4.3008 5.5296 3.1744 13.312-2.4576 17.408-2.3552 1.7408-4.7104 3.3792-6.9632 5.3248-4.8128 3.8912-9.5232 7.7824-14.0288 12.0832-2.4576 2.3552-5.5296 3.3792-8.704 3.3792z m457.1136 158.5152c-6.2464 0-11.6736-4.5056-12.5952-10.752-2.56-18.7392-7.3728-37.1712-14.2336-54.8864-22.8352-59.8016-67.584-108.7488-125.5424-137.6256-35.9424-17.92-74.6496-27.2384-114.5856-27.7504-39.0144-0.512-78.2336 7.8848-113.7664 24.1664-5.0176 2.3552-9.9328 4.9152-14.9504 7.4752-6.144 3.2768-13.824 1.1264-17.3056-4.9152-3.3792-5.9392-1.1264-13.6192 5.0176-16.896 5.3248-2.8672 10.9568-5.7344 16.384-8.192 38.8096-17.8176 81.92-27.0336 124.8256-26.5216 43.9296 0.512 86.3232 10.752 125.8496 30.4128 63.8976 31.8464 112.9472 85.504 138.0352 151.1424 7.3728 19.3536 12.6976 39.6288 15.5648 60.1088 0.9216 6.8608-3.9936 13.1072-10.9568 14.0288-0.512 0.2048-1.1264 0.2048-1.7408 0.2048z m0 0" fill="#FFFFFF" p-id="9050"></path><path d="M281.9072 564.3264c0 77.824 42.2912 149.7088 111.104 188.7232 68.7104 38.912 153.3952 38.912 222.1056 0s111.104-110.8992 111.104-188.7232c0-120.32-99.4304-217.8048-222.1056-217.8048-122.5728 0-222.208 97.4848-222.208 217.8048z m0 0" fill="#C47857" p-id="9051"></path><path d="M439.0912 622.4896c13.7216 10.24 29.7984 15.4624 48.128 15.4624 11.5712 0 20.8896-2.56 27.648-7.68 6.8608-5.12 10.24-12.4928 10.24-21.9136 0-9.728-4.096-17.2032-12.1856-22.3232s-19.456-7.68-34.0992-7.68h-18.3296v-33.1776h16.896c27.648 0 41.472-9.3184 41.472-27.9552 0-17.5104-10.5472-26.3168-31.8464-26.3168-13.824 0-27.2384 4.5056-40.3456 13.5168v-35.5328c14.2336-7.3728 30.9248-11.0592 50.176-11.0592 19.5584 0 35.328 4.5056 47.5136 13.5168 12.1856 9.0112 18.2272 21.504 18.2272 37.4784 0 26.9312-13.7216 43.9296-40.96 50.7904v0.6144c14.336 1.6384 25.9072 6.8608 34.5088 15.7696s12.9024 19.7632 12.9024 32.5632c0 19.5584-7.168 34.9184-21.504 45.8752-14.336 10.9568-33.3824 16.4864-57.2416 16.4864-21.1968 0-38.2976-3.4816-51.2-10.5472v-37.888z" fill="#FFFFFF" p-id="9052"></path></svg>
							<span>全网最强JIRA数据库分析</span>
						</li>
						<li>
							<span>
								【狂神说】快速入门Go语言03：HelloWorld
							</span>
						</li>
						<li>
							<span>
								Flowable UI应用安装与配置
							</span>
						</li>
						<li>
							<span>
								.NET MAUI 项目架构与实战
							</span>
						</li>
						<li>
							<span>
								Vue.js 中文 教程
							</span>
						</li>
						<li style="margin-bottom: 35px;">
							<span>
								Java软件开发T程师全套 (笔记+项目实战案例)
							</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="tjzb-box">
			<div class="tjzb-span">
				<span>
					推荐直播
				</span>
			</div>
			<ul>
				<li v-for="webimg in webList" :key="webimg.id">
					<img :src="webimg.img" alt="">
					<span>{{webimg.name}}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import Video from '../Video.vue';
//背景图
import imgHtml from '../../../assets/Detail-img/HTML.jpg'
import imgJava from '../../../assets/Detail-img/Java-img.gif'
import imgPhP from '../../../assets/Detail-img/PHP.jpeg'
import imgPython from '../../../assets/Detail-img/Python.jpg'
import imgUI from '../../../assets/Detail-img/UI.jpeg'
//视频
// import videojava from '@/assets/viode/java.mp4'
// import videohtml from 'https://andysama.work:8089/files/d0c5a88d5b0142f2bb436a7d9c71c64b.mp4'
// import videophp from '@/assets/viode/PHP.mp4'
// import videopython from '@/assets/viode/Python.mp4'
// import videoui from '@/assets/viode/ui.mp4'
//轮播图
import hmJava from '@/assets/hm-java.png'
import sggVue from '@/assets/sgg-vue.jpg'
//推荐直播
import webqd1 from '@/assets/webqd-1.jpg'
import webqd2 from '@/assets/webqd-2.jpg'
import webqd3 from '@/assets/webqd-3.jpg'
import webqd4 from '@/assets/webqd-4.jpg'
import webqd5 from '@/assets/webqd-5.jpg'
import webqd6 from '@/assets/webqd-6.jpg'
import webqd7 from '@/assets/webqd-7.jpg'
import webqd8 from '@/assets/webqd-8.jpg'
import webqd9 from '@/assets/webqd-9.jpg'
import webqd10 from '@/assets/webqd-10.jpg'
import webqd11 from '@/assets/webqd-11.jpg'
import webqd12 from '@/assets/webqd-12.jpg'
import webqd13 from '@/assets/webqd-13.jpg'
import webqd14 from '@/assets/webqd-14.jpg'
import webqd15 from '@/assets/webqd-15.jpg'
import webqd16 from '@/assets/webqd-16.jpg'
import webqd17 from '@/assets/webqd-17.jpg'
import webqd18 from '@/assets/webqd-18.jpg'
import webqd19 from '@/assets/webqd-19.jpg'
import webqd20 from '@/assets/webqd-20.jpg'
export default {
  components: { Video },
	name: 'Live',

	data() {
		return {
			videolist:[
				{
					id:1,
					size:"Java",
					image: imgJava,
					video: "https://andysama.work:8089/files/b303534311084d719b2dabf019f6623d.mp4",
				},
				{
					id:2,
					size:"HTML",
					image:imgHtml,
					video: "https://andysama.work:8089/files/d0c5a88d5b0142f2bb436a7d9c71c64b.mp4"
				},
				{
					id:3,
					size:"UI设计",
					image:imgUI,
					video: "https://andysama.work:8089/files/35460881711b4b0fba3875adea085acf.mp4"
				},
				{
					id:4,
					size:"PHP",
					image:imgPhP,
					video: "https://andysama.work:8089/files/2314857407244769b76ed842c4b5be95.mp4"
				},
				{
					id:5,
					size:"Python",
					image:imgPython,
					video: "https://andysama.work:8089/files/847cb2eb143649ca9d3b59d56eeec595.mp4"
				},
			],
			showVideo: "https://andysama.work:8089/files/d0c5a88d5b0142f2bb436a7d9c71c64b.mp4",
			onclickClass: 1,
			yyList:[
				{
					id:1,
					name:"JAVA"
				},
				{
					id:2,
					name:"C语言"
				},
				{
					id:3,
					name:"UI设计"
				},
				{
					id:4,
					name:"PHP"
				},
				{
					id:5,
					name:"JavaScript"
				},
				{
					id:6,
					name:"更多..."
				},

			],
			imgList:[
				{
					id:1,
					imgGe:hmJava
				},
				{
					id:2,
					imgGe:sggVue
				},
			],
			webList:[
				{
					id:1,
					img:webqd1,
					name:"HTML"
				},
				{
					id:2,
					img:webqd2,
					name:"CSS3"

				},
				{
					id:3,
					img:webqd3,
					name:"JavaScript"

				},
				{
					id:4,
					img:webqd4,
					name:"ES6进阶"
				},
				{
					id:5,
					img:webqd5,
					name:"Git"
				},
				{
					id:6,
					img:webqd6,
					name:"VUE"
				},
				{
					id:7,
					img:webqd7,
					name:"MySQL"
				},
				{
					id:8,
					img:webqd8,
					name:"XDRM"
				},
				{
					id:9,
					img:webqd9,
					name:"微信小程序"
				},
				{
					id:10,
					img:webqd10,
					name:"Uni-App"
				},
				{
					id:11,
					img:webqd11,
					name:"lris框架"
				},
				{
					id:12,
					img:webqd12,
					name:"Gin框架"
				},
				{
					id:13,
					img:webqd13,
					name:"Redis框架"
				},
				{
					id:14,
					img:webqd14,
					name:"OSS云储存"
				},
				{
					id:15,
					img:webqd15,
					name:"grpc"
				},
				{
					id:16,
					img:webqd16,
					name:"短信验证"
				},
				{
					id:17,
					img:webqd17,
					name:"微信登录"
				},
				{
					id:18,
					img:webqd18,
					name:"Beego"
				},
				{
					id:19,
					img:webqd19,
					name:"Go并发编程"
				},
				{
					id:20,
					img:webqd20,
					name:"HTTP编程"
				},
			]
		};
	},

	mounted() {
		
	},

	methods: {
		changeVideo(item){
			this.showVideo = item.video;
			this.onclickClass = item.id;
			// console.log("变量",this.onclickClass,item.id );
		}
	},
};
</script>

<style lang="less" scoped>
.box{
	width: 100%;
	// height: 90vh;
	.top{
		width: 100%;
		height: 740px;
		// background: rebeccapurple;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.top-center-box{
			width: 1300px;
			height: 90%;
			// background: red;
			display: flex;
			justify-content: space-between;

			.top-left-box{
				width: 80%;
				height: 100%;
				background: rgb(0, 0, 0);
	box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.233);

				// position: relative;
				// float: left;
				border-radius: 10px;
				overflow: hidden;
				.video{
					width: 100%;
					height: 100%;
					// background: black;
				}
			}
			.top-right-box{
				width: 18%;
				height: 100%;
				background: #fff;
				border-radius: 10px;
				overflow: hidden;
	box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.233);

				.Detail{
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					.ditev-box{
						overflow: hidden;
						width: 90%;
						height: 110px;
						// background: royalblue;
						background-size: 120%;
						background-repeat: no-repeat;
						background-position: center center;
						img{

							width: 210px;
						}
						// margin-top: 10px;
					}
				}
				// position: relative;
				// float: right;

			}
		}
	}
}
.zzc-box{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.384);
	// background: black;
	// opacity: 0.3;
	transition: all 0.6s;
}
.ditev-box:hover{
	.zzc-box{
		// opacity: 0;
		background: rgba(0, 0, 0, 0);

	}
}
.zzc-boxclick{
	// opacity: 0 !important;
	background: rgba(0, 0, 0, 0);
	

}
.center{
	width: 1300px;
	height: 500px;
	margin: 20px auto;
	// background: red;
	
	.top-center{
		width: 100%;
		height: 100px;
		display: flex;
		// justify-content: center;
		// align-items: center;
		.js-box{
			width: 200px;
			height: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 10px;
			background: #fff;
			border-radius: 15px;
  		cursor :pointer;
			box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.233);

			span{
				font-size: 20px;
				font-weight: bolder;
			}
		}
	}
}
.cen-center{
	width: 100%;
	height: 300px;
	// background: cyan;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	.cen-left{
		width: 40%;
		height: 100%;
		// background: coral;
		// margin-right: 20px;
		border-radius: 15px;
		overflow: hidden;
		box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.233);

	}
	.cen-zj{
		width: 29%;
		height: 100%;
		// background: rgb(66, 21, 5);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		// margin-right: 20px;

	}
	.cen-right{
		width: 29%;
		height: 100%;
		border-radius: 15px;
	background: #fff;
	box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.233);
		// background: rgb(255, 68, 0);
	}
}
.cen-zj-top{
	width: 100%;height: 46%;
	border-radius: 15px;
	background: #fff;
	box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.233);

	.ul-box{
		display: flex;
		li{
			width: 32%;
			height: 90%;
			display: flex;
			flex-direction:column;
			justify-content: center;
			align-items:center;
			margin: 0 5px;
			cursor :pointer;
			// padding: 10px;
			// background: chocolate;
			span{
			}
			img{
				width: 100%;
				margin-bottom: 10px;

			}
		}
	}
}
.cen-zj-buttom{
	width: 100%;
	height: 52%;
	border-radius: 15px;
	background: #fff;
	box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.233);
	.zx-span{
		margin-top: 7px;
		margin-left: 10px;
			display: flex;
			justify-content: space-between;

	}
	.zx-ul-box{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		li{
			display: flex;
			justify-content: space-between;
			cursor :pointer;
			.time-size{
				font-size: 12px;
				margin-right: 8px;
			}
		}
	}
}
.span-fl{
	margin-top: 10px;
	margin-left: 10px;
	font-size: 18px;
}
.rqb-ul-box{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	li{
		display: flex;
		height: 20px;
		cursor :pointer;
		// justify-content: center;
		align-items: center;
		span{
			position:absolute;
			margin-left: 40px;
		}
	}
}
.span-reb{
	margin: 10px;
	span{
		font-size: 18px;
	}
}
.tjzb-box{
	width: 1300px;
	// height: 500px;
	margin: 0 auto;
	.tjzb-span{
		span{
			font-size: 30px;
		}
	}
	ul{
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		li{
			padding: 20px;
			margin: 20px;
			border-radius: 15px;
			background: #fff;
			box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.233);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			cursor :pointer;
			span{
				margin-top: 20px;
				font-size: 20px;
			}
		}
	}
}
</style>